<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;

/* @var $this yii\web\View */
/* @var $model app\models\AsrAudio */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="asr-audio-form">

    <a id="back" class="btn btn-default pull-left" href="../asr-audio/index" ><i class="fa fa-backward"></i> 返回</a><br><br>

    <?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]); ?>

    <?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>

    <?=$form->field($model, 'audio_classify_id')->dropDownList(\yii\helpers\ArrayHelper::map(\app\models\AsrAudioClassify::find()->all(), 'audio_classify_id', 'name'))->label('选择流程种类');?>

    <div class="form-group">
        <?= Html::submitButton('保存', ['class' => 'btn btn-info']) ?>
    </div>
<!-- !   保存-->

    <?php ActiveForm::end(); ?>
</div>


<!-- !   以下是js-->
<script>
    var call_num = 1;
    $("#addKeywordAnd").click(function(){
        call_num++;
        var sDiv = $(this).prev();
        //将内容添加到后面
        sDiv.after(getHtml(call_num));
        document.getElementById("select_files_"+call_num).className.replace(/\bfile-loading\b/,"");
        //给内容添加事件
        $("#addKeyword_"+call_num).click(function() {
            var keyword = $("#asrkeyword-name_"+call_num).val();
            if($("#delete_"+call_num+"_"+keyword).length ==0 && keyword!=""){
                $("#keyword_"+call_num).append("<li><input  name='AsrKeyword[name]["+call_num+"][]' readonly='readonly' value='"+keyword+" '  style='border:0px;margin:10px 4px;'><span class='pull-right badge bg-red' id='delete_"+call_num+"_"+keyword+"' style='border:0px;margin:10px 4px;'>删除</span></input></li>");
                $("#delete_"+call_num+"_"+keyword).click(function() {
                    $(this).parent().remove();
                });
            }else{
                alert("请重新输入关键字！");
                $("#asrkeyword-name_"+call_num).focus();
            }
        });
        //绑定按钮的点击事件让上传按钮隐藏
        $("#select_files_"+call_num).bind('click',function () {
            $("button[title='上传选中文件']").hide();
        })
        //将文件添加进input里面
        jQuery(function ($) {
            if (jQuery('#select_files_'+call_num).data('fileinput')) { jQuery('#select_files_'+call_num).fileinput('destroy'); }
            jQuery('#select_files_'+call_num).fileinput(fileinput_05740241);
        });
        // id前缀为delete_的所有i的jquery对象
        $("#delete_"+call_num).click(function () {
            if(confirm("确定删除关键字与语音")){
                $(this).parent().parent().parent().parent().parent().remove();
            }
        });
        $("input[name='AsrAudio[start_end]["+call_num+"]']").bind("click",function () {
            if($(this).val()!=2){
                $("#keyword_hidden_"+call_num).attr("hidden","hidden");
            }else{
                $("#keyword_hidden_"+call_num).removeAttr("hidden");
            }
        })
    });

    function getHtml(num){
        var table =
            '<table class="table table-bordered">'+
            '                            <tbody>'+
            "<tr>"+
            "                                    <th colspan=\"2\">"+
            "                                       <div class=\"form-group field-asraudio-start_end_1\">"+
            "<label class=\"control-label\">当选择开始语与结束语时可以不用填写关键字</label>"+
            "<input type=\"hidden\" name=\"AsrAudio[start_end]["+num+"]\" value=\"\"><div id=\"asraudio-start_end_"+num+"\" value=\"2\" template=\"<span class=&quot;radio&quot;>&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{input}&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{label}</span>\"><label><input type=\"radio\" name=\"AsrAudio[start_end]["+num+"]\" value=\"1\"> 开始语</label><label><input type=\"radio\" name=\"AsrAudio[start_end]["+num+"]\" value=\"2\" checked=\"\"> 中间语</label><label><input type=\"radio\" name=\"AsrAudio[start_end]["+num+"]\" value=\"3\"> 结束语</label></div>"+
            ""+
            "<div class=\"help-block\"></div>"+
            "</div>"+
            "                                    </th>"+
            "                                </tr>"+
            "                                </tr>"+
            '                                <tr>'+
            '                                    <td id="keyword_hidden_'+num+'">'+
            '                                        <div class="form-group  required">'+
            '                                            <label class="control-label" for="asrkeyword-name">请输入关键字</label>'+
            '                                            <input type="text" id="asrkeyword-name_'+call_num+'" class="form-control" maxlength="30">'+
            '                                            <div class="help-block"></div>'+
            '                                            <div class="box box-widget widget-user-2">'+
            '                                              <ul class="nav nav-stacked" id="keyword_'+call_num+'">'+
            '                                              </ul>'+
            '                                            </div>'+
            '                                            <button type="button" id="addKeyword_'+call_num+'" class="btn btn-default pull-right"><i class="fa fa-plus"></i> 新增关键字</button>'+
            '                                        </div>'+
            '                                    </td>'+
            '                                        <!-- !   请输入关键字-->'+
            '                                    <td >'+
            '                                        <div class="form-group  required">'+
            '                                            <label class="control-label" for="asraudio-name">当检测到关键字-语音文件上传</label>'+
            '                                            <div class="form-group field-select_files_'+call_num+'">'+
            '<label class="control-label" for="select_files_'+call_num+'"></label>'+
            '<input type="hidden" multiple name="AsrFiles[name]['+call_num+'][]" value="">'+
            '<input type="file" id="select_files_'+call_num+'" name="AsrFiles[name]['+call_num+'][]" value=""><div class="file-input file-input-ajax-new">'+
            '                                            </div>'+
            '                                        </div>'+
            '                                    </td>'+
            '                                        <!-- !   当检测到关键字-语音文件上传-->'+
            '                                </tr>'+
            '                            </tbody>'+
            '                        </table>';
        //绑定按钮的点击事件让上传按钮隐藏
        var html=
            "<div id=\'w"+num+"\' class=\'panel-group collapse in\' aria-expanded=\'true\' style=\'\'>"+
                "<div class=\'panel panel-default\'>" +
            "<div class=\'panel-heading\'>" +
            "<h4 class=\'panel-title\'>" +
            "<a href=\'#\'  class=\'pull-right btn-box-tool\'><i class=\'fa fa-times\' id=\'delete_"+num+"\'></i></a>"+
            "<a class=\'collapse-toggle\' href=\'#w"+num+"-collapse"+num+"\' data-toggle=\'collapse\' data-parent=\'#w"+num+"\'>关键字与语音"+num+"</a>"+
            "</h4>" +
            "</div>"+
            "<div id=\'w"+num+"-collapse"+num+"\' class=\'panel-collapse collapse\'>" +
            "<ul class=\'list-group\'>"+
            "<li class=\'list-group-item\'>" +
            table +
            "</li>"+
            "</ul>"+
            "</div>" +
            "</div>"+
            "</div>";
        return html;
    }

</script>